<template>
  <div class="home">
    <div>Vuex-action基本操作</div>
    <div>{{$store.state.length}}</div>
    <button @click='queryData(123)'>查询</button>
    <!-- 全部的图书 -->
    <div>全部的图书</div>
    <ul>
      <li v-for='item in $store.state.list' :key='item.id'>
        {{item.title}}
      </li>
    </ul>

    <hr>
    <!-- 我喜欢的图书 -->
    <div>我喜欢的图书</div>
    <ul>
      <!-- <li v-for='item in $store.getters.favoriteList' :key='item.id'> -->
      <!-- <li v-for='item in list' :key='item.id'> -->
      <li v-for='item in favoriteList' :key='item.id'>
        {{item.title}}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
// 借助mapActions函数简化action的触发：直接把action映射为函数
export default {
  data () {
    return {
      count: 10
    }
  },
  computed: {
    // list () {
    //   return this.$store.getters.favoriteList
    // },
    // 1. 参数是对象
    // ...mapGetters({
    //   list: 'favoriteList'
    // })
    // 2. 参数是数组
    ...mapGetters(['favoriteList'])
  },
  methods: {
    // handleClick () {
    //   // 调用接口获取数据：触发action
    //   this.$store.dispatch('queryData', 123)
    // }
    // 参数是对象
    // ...mapActions({
    //   handleClick: 'queryData'
    // })
    // 参数是数组
    ...mapActions(['queryData'])
  }
}
</script>
